<template>
    <div class="Account_Root">
        <AccountInfo v-for="acc in userData" :key="acc.id" :uid="acc.id" :userName="acc.nickname"
            :createDate="acc.createtime" :description="acc.description" :avatar="acc.avatar" :state="acc.nonlocked"
            @ChangeUserState="HandleUserUE">
        </AccountInfo>
        <el-empty :image-size="200" description="没有用户注册呢" v-if="emptyShow" />
    </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import AccountInfo from '../../components/AccountInfo.vue';
import { HandleUser, GetAllUser } from '../../Net/netApi.js'
import { CustomerConfirm, CustomerMessage } from '../../Util/Confirm.js';

let userData = ref([])
let emptyShow = ref(true)

onMounted(() => {
    GetAllUserList()
})

//TODO:如果出现数据异常，请删除这里
watch(userData, (newValue, oldValue) => {
    if (newValue != oldValue) {
        userData.value = newValue
    }
})

const GetAllUserList = async () => {
    let res = await GetAllUser()
    userData.value = []
    if (res.code == 200) {
        userData.value = res.data
    }
    if (userData.value.length > 0) {
        emptyShow.value = false
    }
}

const HandleUserUE = (source) => {
    CustomerConfirm('确定该处理结果吗?', '警告', '确定', '取消', 'error',
        () => HandleUserStatus(source), () => CustomerMessage('已取消', 'info'))
}

/**
 * @description 处理用户结果
 * @param {result} 用户ID和处理结果
 */
const HandleUserStatus = async (source) => {
    let res = await HandleUser(source.uid, source.status)
    if (res.code == 200 && source.status == '1') {
        CustomerMessage('已封禁该用户', 'success')
    } else if (res.code == 200 && source.status == '0') {
        CustomerMessage('已解禁该用户', 'success')
    }
    //重新获取列表
    GetAllUserList()
}



</script>

<style lang='less' scoped>
.Account_Root {
    padding: 0.5rem 0 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}
</style>